<template>
<div class="wrap">
  <div class="hd">
    <img src="../../assets/images/user.jpg" alt="">
    <span>罗老板vs李经理</span>
  </div>
  <div class="order-tabs">
    <router-link class="tab" :to="{path: '/orderList/'+ item.navId}" v-for="(item, index) in tabs" :key="index">
      <van-icon :name="item.icon" />
      <span>{{item.navName}}</span>
    </router-link>
  </div>
  <div class="cell-item">
    <van-cell-group>
      <van-cell title="我的益康币" icon="gold-coin" is-link @click="openMyYkbPanel" />
      <van-cell title="收货地址" icon="location" is-link  @click="openAddressListPanel"/>
      <van-cell title="帮助与反馈" icon="question" is-link @click="openHelpPanel" />
    </van-cell-group>
  </div>
  <div class="ft">
    <van-button type="primary" bottom-action @click="logout">退出登录</van-button>
  </div>
  <!-- 我的健康币面板 -->
  <my-ykb-panel :showMyYkbPanel="showMyYkbPanel" @closeMyYkbPanel="closeMyYkbPanel"></my-ykb-panel>
  <!-- 收货地址列表面板 -->
  <address-list-panel :showAddressListPanel="showAddressListPanel"  @closeAddressListPanel="closeAddressListPanel"></address-list-panel>
  <!-- 帮助与反馈面板 -->
  <help-panel :showHelpPanel="showHelpPanel"  @closeHelpPanel="closeHelpPanel"></help-panel>
</div>
</template>
<script>
export default {
  data() {
    return {
      showMyYkbPanel: false, // 是否显示我的健康币面板
      showAddressListPanel: false, // 是否显示收货地址列表面板
      showHelpPanel: false, // 是否显示帮助与反馈面板
      tabs: [{
          navId: '0',
          icon: 'pending-orders',
          navName: '全部订单'
        },
        {
          navId: '1',
          icon: 'pending-payment',
          navName: '待付款'
        },
        {
          navId: '2',
          icon: 'pending-deliver',
          navName: '待发货'
        },
        {
          navId: '3',
          icon: 'tosend',
          navName: '待收货'
        }
      ]
    }
  },
  methods: {
    // 退出
    logout () {
      this.$router.push({path:'/index'})
    },
    // 打开我的健康币面板
    openMyYkbPanel () {
        this.showMyYkbPanel = true
    },
    // 关闭我的健康币面板
    closeMyYkbPanel () {
      this.showMyYkbPanel = false
    },
    // 打开地址列表面板
    openAddressListPanel () {
        this.showAddressListPanel = true
    },
    // 关闭地址列表面板
    closeAddressListPanel () {
      this.showAddressListPanel = false
    },
    // 打开帮助与反馈面板
    openHelpPanel () {
        this.showHelpPanel = true
    },
    // 关闭帮助与反馈面板
    closeHelpPanel () {
      this.showHelpPanel = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/styles/common.scss';
.wrap {
    // height: 100vh;
    // background-color: #f2f2f2;
    .hd {
        width: 100%;
        height: px2rem(160px);
        background-color: #f44;
        display: flex;
        img {
            width: px2rem(80px);
            height: auto;
            border-radius: px2rem(80px);
            margin: auto px2rem(30px);
        }
        span {
            line-height: px2rem(160px);
            color: #fff;
            @include font-dpr(14px);
        }
    }
    .order-tabs {
        display: flex;
        flex-direction: row;
        background-color: #fff;
        padding-top: px2rem(15px);
        .tab {
            text-align: center;
            vertical-align: middle;
            width: 25%;
            height: px2rem(90px);
            .van-icon {
                font-size: px2rem(40px);
            }
            span {
                margin: px2rem(10px) auto;
                display: block;
            }
        }
    }
    .cell-item {
        clear: both;
        margin-top: px2rem(15px);
    }
    .ft {
        margin-top: px2rem(15px);
        width: 100%;
        position: fixed;
        bottom: px2rem(150px);
        display: flex;
        button {
            width: 80%;
            margin: 0 auto;
            border-radius: px2rem(10px);
            // background-color: #26a2ff;
            // color: #fff;
        }
    }
}
a:hover, a:visited, a:link, a:active{
  color: black;
}
</style>
